<template>
  <div class="m-2 p-3">
    <el-button size="small" type="success" @click="deBounceWrap(toAddOrEdit)">新增</el-button>

    <el-table border class="mt-2" :data="tableData" v-loading="loading" size="small">
      <el-table-column prop="id" label="排序" width="50"></el-table-column>
      <el-table-column prop="activity_name" label="活动标题"></el-table-column>
      <el-table-column prop="activity_gift_prize" width="800" label="礼物内容">
        <template slot-scope="{row}">
          <div class="flex flex-col">
            <el-tag
              v-for="gift in JSON.parse(row.activity_gift_prize)"
              :key="gift.id"
              class="block mb-2">
              礼物名称: <span class="text-red-600">{{ formatGiftName(gift.id) }}</span>,
              <span class="text-red-600">{{ gift.consume_sugar_num }}</span> 糖果,
              <span class="text-red-600">{{ gift.consume_point_num }}</span> 活动点数，
              限兑 <span class="text-red-600">{{ gift.purchase_limitation_number | formatLimitNumber }}</span> 次。
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="start_time" label="开始时间">
        <template slot-scope="{row}">
          <span>{{ row.start_time | formatTimeStamp }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="end_time" label="结束时间">
        <template slot-scope="{row}">
          <span>{{ row.end_time | formatTimeStamp }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120" prop="is_open" label="活动状态">
        <template slot-scope="{row}">
          <el-tag :type="row.is_open ? 'success': 'info'">{{ row.is_open ? '开启' : '未开启' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="{row}">
          <el-button size="small" type="primary" @click="deBounceWrap(toAddOrEdit, row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleToDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="mt-3 text-right"
      background
      layout="total, prev, pager, next"
      :total="meta.total"
      @current-change="handleCurrentChange">
    </el-pagination>

    <add-or-edit ref="addOrEdit" :gift-list="giftList" @initData="initData"/>
  </div>
</template>

<script>
import AddOrEdit from "@/views/eventManagement/component/AddOrEdit";

import {
  sugarActivity,
  delSugarActivity
} from "@/api/eventManagement/userRede";
import {listData} from "@/api/giftMem/giftList";

export default {
  name: "activeConfiguration",
  components: {AddOrEdit},
  data() {
    return {
      loading: false,
      meta: {
        page: 1,
        perPage: 10,
        total: undefined
      },
      tableData: [],

      /* 礼物列表 */
      giftList: []
    }
  },
  computed: {
    addOrEdit() {
      return this.$refs.addOrEdit
    }
  },
  filters: {
    formatTimeStamp(timeStamp) {
      return new Date(timeStamp * 1E3).toLocaleString()
    },
    formatLimitNumber(value) {
      if (value === 99999) return "无限制"
      return value
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.loading = true
      sugarActivity(this.meta)
        .then(res => {
          const {data: {list, meta: {page, total, limit}}} = res
          this.tableData = list
          this.meta.page = page
          this.meta.total = total
          this.meta.perPage = limit
        })
        .finally(() => this.loading = false)
      listData({perPage: 1e5}).then(res => {
        const {data: {list}} = res
        this.giftList = list
      })
    },
    toAddOrEdit(row) {
      this.addOrEdit.show(row)
    },
    handleCurrentChange(page) {
      this.meta.page = page
      this.initData()
    },
    handleToDel(row) {
      const {id} = row

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => delSugarActivity(id))
        .then(() => {
          this.$message.success("删除成功！")
          this.initData()
        })
        .catch(() => this.$message.info("已取消"))
    },
    formatGiftName(id) {
      const target = this.giftList.find(gift => gift.id === id)
      return target && target.name
    }
  }
}
</script>
